<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-dialog :visible="true" title="短信推送">
        <el-form label-width="120px">
            <el-row>
                <el-form-item label="短信名称" required>
                    <div style="display: flex">
                        <el-input></el-input>
                        <el-button>复制模版</el-button>
                    </div>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="短信内链接" required>
                    <el-radio-group v-model="urlType">
                        <el-radio :label="1">固定链接</el-radio>
                        <el-radio :label="2">动态链接</el-radio>
                    </el-radio-group>
                    <div style="display: flex">
                        <el-input :disabled="urlType == 2"></el-input>
                        <el-button v-if="urlType == 2" @click="dynamicUrlDialog = true">编辑动态链接</el-button>
                    </div>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="短信内容" required>
                    <div style="border: 1px solid #bbb; height: 300px">
                        <template v-for="obj in content">
                            <span v-if="isString(obj)">{{obj}}</span>
                            <el-tag v-if="isVariable(obj)" :type="obj.tagtype">
                                <template v-if="obj.type">{{obj.type}}|</template>{{obj.label}}
                            </el-tag>
                        </template>
                        <el-input @input="inputContent" @keyup.delete.native="deleteContent" style="width: 10px"></el-input>
                    </div>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="常用变量" required>
                    <el-tag v-for="tag in variables" @click="addVariableToContent(tag)" style="margin-right: 10px" :type="tag.tagtype">
                        <template v-if="tag.type">{{tag.type}}|</template>{{tag.label}}
                    </el-tag>
                    <el-button icon="el-icon-plus" plain type="primary"></el-button>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="签名" required>
                    <el-radio-group v-model="signature">
                        <el-radio :label="1">【58同城】</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="触发时机" required>

                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="每日发送上限" required>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="总发送上限" required>

                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>

    <!--  动态链接编辑  -->
    <el-dialog :visible.sync="dynamicUrlDialog" title="编辑动态链接">
        <el-form label-width="100px">
            <el-form-item required label="链接地址">
                <el-input></el-input>
            </el-form-item>
            <el-form-item label="动态参数" required>
                <div style="display: flex">
                    <el-input placeholder="请填写参数名称" clearable></el-input>
                    -
                    <el-select placeholder="请选择参数类型" v-model="urlParamType" style="width: 500px" clearable>
                        <el-option :value="1">固定值</el-option>
                        <el-option :value="2">内置函数</el-option>
                        <el-option :value="3">标签值</el-option>
                    </el-select>
                    -
                    <el-select :placeholder="urlParamType == 2 ? '请选择内置函数' : '请选择标签'" style="width: 500px"
                               v-if="urlParamType != 1" :disabled="!urlParamType">

                    </el-select>
                    <el-input v-else style="width: 500px" placeholder="请填写参数值"></el-input>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button style="width: 100%">新增参数</el-button>
            </el-form-item>
            <el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                urlType: 1,
                dynamicUrlDialog: false,
                urlParamType: null,
                signature: 1,
                content: [],
                variables: [
                    {
                        type: "",
                        label: "短链接",
                        key: "",
                        tagtype: "warning"
                    },
                    {
                        type: "蜂巢标签",
                        label: "会员状态",
                        key: "",
                        tagtype: "primary"
                    },
                    {
                        type: "内置函数",
                        label: "B职位位置",
                        key: "",
                        tagtype: "primary"
                    },
                    {
                        type: "内置函数",
                        label: "B招聘职位",
                        key: "",
                        tagtype: "primary"
                    },
                    {
                        type: "内置函数",
                        label: "C求职者性别",
                        key: "",
                        tagtype: "primary"
                    },
                    {
                        type: "内置函数",
                        label: "C求职者经验",
                        key: "",
                        tagtype: "primary"
                    }
                ]
            }
        },
        watch:{
          'content': function(nv){
              console.log(nv)
          }
        },
        methods: {
            inputContent(event) {
                var lastEl = this.content[this.content.length - 1];
                if(this.isString(lastEl)){
                    lastEl = lastEl + event + ""
                    this.content.splice(this.content.length - 1, 1, lastEl)
                } else {
                    this.content.push(event)
                }
            },
            addVariableToContent(tag) {
                this.content.push(tag)
            },
            deleteContent(){
                console.log('删除事件')
                var lastEl = this.content[this.content.length - 1];
                if(this.isString(lastEl)){
                    lastEl = lastEl.substring(0, lastEl.length - 1)
                    this.content.splice(this.content.length - 1, 1, lastEl)
                } else {
                    this.content.splice(this.content.length - 1, 1)
                }
            },
            isVariable(obj) {
                return typeof obj === 'object'
            },
            isString(obj) {
                return typeof obj === 'string'
            }
        }
    })
</script>
</html>